<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数据表格</title>
    <script src="../layui/layui.js"></script>
    <link rel="stylesheet" href="../layui/css/layui.css">
</head>
<body>
<!-- 数据表格 -->
<table id="myTable"></table>

<script type="text/html" id="myToolbar">

    <!-- 搜索功能 -->
    <div class="layui-inline">
        <div class="layui-input-inline" style="width: 200px;">
            <input type="text" id="keyword" name="keyword" autocomplete="off" placeholder="请输入关键词" class="layui-input">
        </div>
    </div>
    <button type="button" class="layui-btn layui-btn-sm layui-btn-green" onclick="search()">搜索</button>

</script>

<!-- 展示数据 -->
<script>
    layui.use(["table", "jquery", "layer", "form"], function () {
        //获取到table对象
        var table = layui.table;

        //展示数据的代码
        table.render({
            //把id是myTable的table标签转换成table模块效果
            elem: "#myTable", //elem:table模块基础参数
            url: "/dept/findByPage", //这里写分页搜索查询的动态sql
            page: true,
            limit: 6,
            limits: [6, 12, 18],
            toolbar: "#myToolbar",
            cols: [[
                {type: "checkbox"},
                {field: "id", title: " 编号", align: "center"},
                {field: "name", title: "科室名", align: "center"},
                {field: "tel", title: "电话", align: "center"},
                {field: "area", title: "地址", align: "center"},
            ]]
        });
    });

    //搜索
    function search() {
        //获取layui实例
        var $ = layui.jquery;
        //获取用户输入文本框内的值
        var keyword = $("#keyword").val();
        console.log(keyword)

        //发送ajax，并刷新table，重新加载数据
        var table = layui.table;
        table.reload("myTable", {
            url: '/dept/findBySearch',
            where: {"keyword": keyword}
        });
    }

</script>
</body>
</html>